<template>
  <view class="form-wrapper">
  	<view class="head-box u-m-b-60">
  		<view class="head-title u-m-b-20">绑定手机号</view>
  		<view class="head-subtitle">为了您的账号安全，请绑定手机号</view>
  	</view>
  	<view class="form-item u-border-bottom">
  		<view class="item-content u-flex u-col-center">
  			<view class="item-title">手机号</view>
  			<u-input
  				class="u-m-r-10 u-flex-1"
  				@blur="checkValue($event, 'mobile')"
  				@input="mobileInput($event, 'mobile')"
  				placeholder="请输入手机号"
  				:placeholderStyle="placeholderStyle"
  				v-model="form.data.mobile"
  				type="number"
  			></u-input>
  			<button
  				class="u-reset-button btn-code btn-code-start"
  				:disabled="!form.data.isMobileEnd"
  				:class="{ 'btn-code-end': form.data.isMobileEnd }"
  				slot="right"
  				@tap="getSmsCode('changemobile')"
  			>
  				{{ codeText }}
  			</button>
  		</view>
  		<view class="message-error">{{ form.error.mobile || '' }}</view>
  	</view>
  	<view class="form-item u-border-bottom">
  		<view class="item-content u-flex u-col-center">
  			<view class="item-title">验证码</view>
  			<u-input
  				class="u-m-r-10 u-flex-1"
  				@blur="checkValue($event, 'code')"
  				@input="checkValue($event, 'code')"
  				placeholder="请输入验证码"
  				:placeholderStyle="placeholderStyle"
  				v-model="form.data.code"
  				type="number"
  			></u-input>
  		</view>
  		<view class="message-error">{{ form.error.code || '' }}</view>
  		
  		<view class="editPwd-btn-box u-m-t-80">
  			<button class="u-reset-button btn-primary" @tap="bindMobileSubmit">立即绑定</button>
  		</view>
  	</view>
  </view>
</template>

<script>
  import { mapGetters, mapActions } from 'vuex';
  import FormValidate from '@/utils/validate/form';
  
  export default {
  	name: 'BindMobile',
    props: {
      placeholderStyle: {
        type: String,
        default: '',
      },
      protocol: {
        type: Boolean,
        required: true,
      },
      checkValue: {
        type: Function,
        required: true,
      },
      validation: {
        type: Function,
        required: true,
      },
      validateAll: {
        type: Function,
        required: true,
      },
      validateSubmit: {
        type: Function,
        required: true,
      },
      closeAuthModal: {
        type: Function,
        required: true,
      },
    },
  	data() {
  		return {
  			form: {
  				data: {
  					mobile: '', //手机号
  					code: '', //验证码
  					isMobileEnd: false // 手机号输入完毕
  				},
  				rules: {
  					code: FormValidate.code,
  					mobile: FormValidate.mobile
  				},
  				error: {
  					mobile: '', //手机号
  					code: '' //验证码
  				}
  			},
  		};
  	},
    computed:{
      ...mapGetters(['authType']),
    },
  	methods: {
  		...mapActions(['getUserInfo', 'showAuthModal']),
  		async bindMobileSubmit() {
  			let that = this;
        
        const {mobile, code, password} = this.form.data
        
  			(await that.validateSubmit()) &&
  				that
  					.$http(
  						'user.bindMobile',
  						{
  							mobile,
  							code,
  							password
  						},
  						'绑定中...'
  					)
  					.then(res => {
  						if (res.code === 1) {
  							that.$u.toast(res.msg);
  							that.closeAuthModal();
  							that.getUserInfo();
  						}
  					});
  		},
  	}
  };
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>
